<template>
	<div class="bianjishangpin">
        <div>
        <left></left>
        <div class="right">
            <div style="height: 91px; border-bottom: 1px solid rgb(227, 232, 241); width: 100%; padding: 0 30px;" class="flexbc">
            <div class="flexcc fanhui" @click="back">
                <div><i class="el-icon-arrow-left" style="margin-right: 5px;"></i></div>
                <div>返回</div>
            </div>
            <top></top>
            </div>
            <div style="padding: 37px 30px 0 30px; height: calc(100vh - 91px); overflow: auto;">
            <div class="flexc" style="font-size: 16px; font-weight: bold; margin-bottom: 20px;">
                <div><img src="../../../static/img/bianji1.png" style="width: 22px; margin-right: 10px;"></div>
                <div>编辑商品详情</div>
                <!-- <div>{{ form.description }}</div> -->
            </div>
            <el-form ref="form" :model="form">
                <div class="baibeijing" style="width: 780px;">
                    <el-form-item>
                    <div>该详情会展示给分销商，用于描述套餐的具体政策，不发货区域、办理销户、等专业性信息</div>
                    <div><fuwenben :content="form.description" @getcontent="getcontent" v-if="relo"></fuwenben></div>
                    </el-form-item>
                </div>
                <div class="baibeijing" style="width: 780px;margin-top: 20px">
                    <div class="flex">
                            <div>
                                <div><img src="../../../static/img/kaika.png" style="width: 22px; margin-right: 10px;float: left"></div>
                                <div style="margin-bottom: 10px;">开卡年龄:</div>
                                <el-form-item>
                                    <div>
                                        <el-input v-model="form.min_age" style="width: 140px;" placeholder="请输入"></el-input> -
                                        <el-input v-model="form.max_age" style="width: 140px; margin-right: 30px;" placeholder="请输入"></el-input>
                                    </div>
                                </el-form-item>
                            </div>
                            <div>
                                <div><img src="../../../static/img/heyueqi.png" style="width: 22px; margin-right: 10px;float: left"></div>
                                <div style="margin-bottom: 10px;">合约期:</div>
                                <el-form-item>
                                    <el-select v-model="form.contract" clearable style="width: 140px; margin-right: 30px;" placeholder="请选择">
                                        <el-option
                                        v-for="item in heyueqiOptions"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </div>
                            <div>
                                <div><img src="../../../static/img/kuaidi.png" style="width: 22px; margin-right: 10px;float: left"></div>
                                <div style="margin-bottom: 10px;">快递方式:</div>
                                <el-form-item>
                                    <div><el-input v-model="form.express" style="width: 140px; margin-right: 30px;" placeholder="请输入"></el-input></div>
                                </el-form-item>
                            </div>
                            <div style="margin-top: 20px">
                                <div><img src="../../../static/img/jihuo.png" style="width: 22px; margin-right: 10px;float: left"></div>
                                <div style="margin-bottom: 10px;">激活方式:</div>
                                <el-form-item>
                                    <div><el-input v-model="form.activation_method" style="width: 140px; margin-right: 30px;" placeholder="请输入"></el-input></div>
                                </el-form-item>
                            </div>
                    </div>
                </div>
                <el-button type="primary" round style="margin: 44px 0;" @click="xiugai">保存</el-button>
            </el-form>
                <!-- <footers></footers> -->
            </div>
        </div>
        </div>
	</div>
</template>

<script>
  import left from '../left.vue'
  import top from '../top.vue'
  import footers from '../footer.vue'
  import chuantu from '@/components/chuantu.vue'
  import fuwenben from '@/components/fuwenben.vue'
  import topandleft from '../topandleft.vue'
	export default {
		name: 'bianjishangpin',
        components:{
        left,chuantu,fuwenben,top,topandleft,footers
        },
		data() {
		return {
        form:{
            description:'' ,
            // contract:'无',
            min_age:'',
            max_age:'',
            contract:'',
            express:'',
            activation_method:''


        },
        options:[],
        props: {
          multiple: true
        },
        shangpinyeshow:false,//重要
        shoujiban:false,
        relo:true,
        heyueqiOptions: [
        {
          value: '0',
          label: '无'
        },
        {
          value: '1',
          label: '1个月'
        }, {
          value: '2',
          label: '2个月'
        }, {
          value: '3',
          label: '3个月'
        }, {
          value: '4',
          label: '4个月'
        },{
          value: '5',
          label: '5个月'
        },{
          value: '6',
          label: '6个月'
        },{
          value: '7',
          label: '7个月'
        },{
          value: '8',
          label: '8个月'
        },{
          value: '9',
          label: '9个月'
        },{
          value: '10',
          label: '10个月'
        },{
          value: '11',
          label: '11个月'
        },{
          value: '12',
          label: '12个月'
        },{
          value: '24',
          label: '24个月'
        },{
          value: '36',
          label: '36个月'
        },{
          value: '48',
          label: '48个月'
        }],
		}
	  },
		created() {

		},
		mounted() {

            if(window.screen.width < 1080){
                this.shoujiban = true
                var h = document.documentElement.clientWidth / 7.5 + 'px';
                document.documentElement.style.fontSize = h;
            }else{

            }
            this.getFwbdescription(this.$route.query.fwbdescription,this.$route.query.fwbmin_age,this.$route.query.fwbmax_age,this.$route.query.fwbcontract,this.$route.query.fwbexpress,this.$route.query.fwbactivation_method)
            this.getEditId(this.$route.query.id)

		},
		methods: {
        getcontent:function(item){
            this.form.description = item
            const fonts = document.getElementsByTagName('font');
            for (let font of fonts) {
                const face = font.getAttribute('face');
                if (face) {
                    font.style.setProperty('font-family', `"${face}"`, 'important');
                    console.log(`修复字体: ${face}`);
                }
            }
        },

        xiugai:function(){
            let all = JSON.parse(JSON.stringify(this.form))
            axios.post('/own/page/package/details/update',all).then((response)=>{
                console.log('response333',response)
                if (response.data.msg.code == 0) {
                    this.$message.success('修改成功');
                } else {
                    this.$message.error(response.data.msg.info);
                }
            })
        },
        //如果在商品资料页中点击编辑
        getFwbdescription(descriptions,fwbmin_age,fwbmax_age,fwbcontract,fwbexpress,fwbactivation_method){
            console.log('descriptions8888')
            this.relo = false
            this.form.description = descriptions
            this.form.min_age =fwbmin_age
            this.form.max_age = fwbmax_age
            if(fwbcontract&&fwbcontract!==''){
                this.form.contract = fwbcontract
            }
            this.form.express =fwbexpress
            this.form.activation_method=fwbactivation_method
            this.$nextTick(()=>{
              this.relo = true
            })
            console.log(this.form.description)

        },
        //
        getEditId(id){
            this.form.id = id
        }
	  }
	}
</script>


<style scoped lang="less">
  .bianjishangpin{
    .sxjact{background: rgb(0, 90, 255); border-radius:30px; font-size: 24px; text-align: center; font-weight: 500; color: rgb(255, 255, 255); width: 150px; height: 60px; margin-right: 30px; }
    .sxj{background: rgb(227, 232, 241); border-radius:30px; font-size: 24px; text-align: center; font-weight: 500; color: rgb(175, 179, 188); width: 150px; height: 60px; margin-right: 30px; }
    .xt{width: 72px;height: 26px; margin-right: 10px; border-radius: 5px; font-size: 12px;}
    .lj{width: 100px; height: 32px; color: rgb(64, 66, 71); background: rgb(227, 232, 241); border-radius: 16px; margin-right: 20px; font-size: 14px; cursor: pointer;}
    .ljact{width: 100px; height: 32px; color: rgb(0, 90, 255); background: rgb(228, 237, 255); border-radius: 16px; margin-right: 20px; font-size: 14px; cursor: pointer;}
    /deep/ .el-form-item{ margin-bottom: 0;}

    /deep/ .el-switch__core{ width: 46px !important; height: 21px; border-radius: 20px; background: rgb(246, 248, 251); border: 1px solid rgb(227, 232, 241);}
    /deep/ .el-switch.is-checked .el-switch__core {
        border-color: rgb(0, 90, 255) !important;
        background-color: rgb(0, 90, 255) !important;
    }
    /deep/ .el-switch.is-checked .el-switch__core::after{margin-left: -18px; left: 100% !important;}
    /deep/ .el-switch__core:after{ width: 17px; height: 17px;  top: 1px; left: 1px; background: rgb(227, 232, 241);}

    /deep/ .el-cascader{ width: 300px;}
  }

</style>
